<template>
  <view id="main">
    <!-- 顶部搜索框 -->
    <zy-topBar
      searchwidth="90%"
      scarchBottom
      showBack
      v-model="searchParam"
      @search="search"
      title="设施信息"
      paddingTop="40"
      height="40">
      <template #right> <view class="fs_12">同步信息</view></template>
    </zy-topBar>
    <zy-tab
      :scrollable="true"
      lineColor="#0077FF"
      :activeStyle="{
        fontWeight: 'bold',
        transform: 'scale(1.1)',
        color: '#0077FF',
      }"
      lineWidth="120rpx"
      @click-tab="changeTab"
      v-model="current"
      :data="list"></zy-tab>
    <view class="content">
      <scroll-view scroll-y>
        <view v-for="item in cerrentList" class="item card flex">
          <view v-if="current !== '2'" class="left flex">
            <view class="status fs_12" :class="item.status">
              {{
                item.status === "s1"
                  ? "正常"
                  : item.status === "s2"
                    ? "故障"
                    : "离线"
              }}
            </view>
          </view>
          <view class="item_content flex">
            <view class="msg title fs_16 flex">
              <view class="label">设备编号：</view>
              <view class="value">{{ item.name }}</view>
            </view>
            <view class="msg flex fs_12 color_text_gray">
              <view class="label">设备类型：</view>
              <view class="value">{{ item.name }}</view>
            </view>
            <view v-if="current == '2'" class="msg flex fs_12 color_text_gray">
              <view class="label">容量(吨)：</view>
              <view class="value">{{ item.unit }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useFacilityStore } from "@/stores/modules/facility/facility";
const facilityStore = useFacilityStore();
const list = [
  { value: "1", name: "产生设施" },
  { value: "2", name: "贮存设施" },
  { value: "3", name: "利用/处置设施" },
];
const searchParam = ref("");
const search = (val: string) => {
  console.log(val);
};
// tab切换
const current = ref("1"); // 当前tab索引
const cerrentList = ref(facilityStore.produceList);
onMounted(() => {
  console.log("mounted", cerrentList.value);
});
const changeTab = async (e: any) => {
  console.log(e);
  switch (e.value) {
    case "1":
      cerrentList.value = facilityStore.produceList;
      break;
    case "2":
      cerrentList.value = facilityStore.storageList;
      break;
    case "3":
      cerrentList.value = facilityStore.useList;
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
scroll-view {
  height: calc(100vh - 148px);
  .item {
    width: 92%;
    margin: 20px auto;
    .left {
      .status {
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        margin-right: 20px;
        &.s0 {
          background: #e5edff;
          color: #7c8190;
        }
        &.s1 {
          background: #4b8ef3;
        }
        &.s2 {
          background: #fb8832;
        }
      }
    }

    .item_content {
      flex-direction: column;
      align-items: flex-start;
      .msg {
        margin-bottom: 6px;
      }
    }
  }
}
</style>
